<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过渡基本使用</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* 分别设置过渡属性 */
      /* transition-property: height,width; */
      /* 设置全属性 */
      transition-property: all;

      /* 分别设置过渡时间 */
      /* transition-duration: 1s,5s; */
      /* 设置全部时间 */
      transition-duration: 1s;

    }
    .box:hover{
      height: 400px;
      width: 1000px;
      background-color: aquamarine;
      transform: rotate(30deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>